<template>
  <f7-popup
      @popup:open="popupOpen"
      @popup:opened="popupOpened"
      @popup:close="popupClose"
      @popup:closed="popupClosed"
  >

        <f7-navbar title="About" back-link="Back"></f7-navbar>

        <f7-block>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod.</f7-block>

  </f7-popup>
</template>

<style lang="less" scoped>

</style>

<script>
import { TweenMax, TimelineMax, CSSPlugin } from "gsap/TweenMax";
import pxToViewport from "../components/utils/px-to-viewport.js"; // px to vw, pxToViewport(375)
var $f7; // Framework7 Object
var $; // Scoped DOM7 selector
var $$; // Global DOM7 selector

export default {

  data() {
    return {
      popupInSecond : 0.4,
      popupOutSecond : 0.4,
      popupInAnimation : true,
      popupOutAnimation : true,
    };
  },

  mounted() {
    var context = this;
    this.$f7ready((f7) => {
      $f7 = f7;
      $ = function(selector) { return f7.$(selector, context.$el); };
      $$ = f7.$;
    });
  },

  methods: {

    popupOpen(event) {
      var popup = event.detail;
      console.log('popup : popup open ' + popup.route.path);
    },
    popupOpened(event) {
      var popup = event.detail;
      console.log('popup : popup opened ' + popup.route.path);
      //popup.close();
    },
    popupClose(event) {
      var popup = event.detail;
      console.log('popup : popup close ' + popup.route.path);
    },
    popupClosed(event) {
      var popup = event.detail;
      console.log('popup : popup closed ' + popup.route.path);
    },

  },

}
</script>
